<template><!--账号管理页面-->
  <div>

    <h2 style="text-align: left;width: 100%">权限配置</h2><hr>
    <h4 style="text-align: left;width: 100%">查询条件</h4>
    <div class="grid-content bg-purple-dark" align="left">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="账号:">
          <el-input v-model="a" placeholder="请输入账号"></el-input>
        </el-form-item>

        <el-form-item label="电话:">
          <el-input v-model="b" placeholder="请输入电话号码"></el-input>
        </el-form-item>

        <el-form-item label="角色:">
          <el-select  v-model="type" placeholder="请选择角色类型" >
            <el-option label="内容运营" value="1"></el-option>
            <el-option label="编辑" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button  @click="onSubmit()">重置</el-button>
          <el-button type="primary" @click="onSubmit()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h4 style="text-align: left;width: 100%">账号列表</h4>
    <el-row>
      <el-col :span="24">
        <div align="left">
          <el-button type="primary" @click="add()">+添加</el-button>
          <el-button type="danger" @click="deleteMul()">删除</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
ref="mt" :data="datas" tooltip-effect="dark" style="width: 100%"
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection" prop="id" width="55">
          </el-table-column>
          <el-table-column prop="name" label="姓名">
          </el-table-column>
          <el-table-column prop="tel" label="电话">
          </el-table-column>
          <el-table-column prop="names" label="昵称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="dep" label="部门" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="role" label="角色" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="date" label="创建时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="warning"  @click="updateRow(scope.$index, datas)">编辑</el-button>
              <el-button type="danger" @click.native.prevent="deleteRow(scope.$index, datas)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
:current-page="currentPage" :page-sizes="[10, 30, 50, 70]"
                         :page-size="10" background="blue" layout="total, sizes, prev, pager, next, jumper"
                         :total="totalRows"
                         @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "AccountManage",
  data() {
    return {
      a:'',
      b:'',
      type:'',
      name:'',
      tel:'',
      names:'',
      dep:'',
      role:'',
      date:'',
      totalRows: 0,
      currentPage: 1,
      currentSize: 5,
      datas: []
    }
  },
  created() {

    this.load();

  },

  methods: {
    add:function(){
      this.$router.push("/systemManagement/account/AddAccount")
    },

    deleteRow: function (index, arr) {

      this.$confirm('你确认是否删除本条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功一条数据!'
        });
        let id = arr[index].id;
        this.axios.delete('parking/' + id).then(res => {
          if (res.data.code === 19000) {
            this.load();
          } else {
            this.$message({
              type: 'warn',
              message: '系统繁忙,请稍后重试!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },


    load: function () {
      this.axios.get('/management/list', {
        params: {
          //将楼号，传递给后端的接口
          pageNum: this.currentPage,
          pageSize: this.currentSize
        }
      })
        .then((res) => {
          this.totalRows = res.data.total;
          this.datas = res.data.list;
        })
        .catch((error) => {
          console.log(error);
        });
    },



    onSubmit: function () {
      this.load();
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    handleSizeChange(val) {
      this.currentSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.load();
    },
  }
}
</script>

<style scoped>

</style>
